* {
  margin: 0;
  padding: 0;
}

.main {
  background-color: rgb(255, 240, 217);
  background-image: url(../images/background001.png);
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0 content: "";
}

.clearfix {
  zoom: 1
}

.background-color1 {
  background-color: rgb(255, 151, 1);
}

header {
  clear: both;
  height: 100px;
  background-color: white;
}

.logo {
  float: left;
  margin-top: 20px;
  margin-left: 20%;
  width: 200px;
  height: 1.5em;
  background-color: rgb(255, 151, 1);
  font-size: 25pt;
}

.logo .logo-font {
  display: block;
}

.logo .logo-font .logo-font1 {
  color: red;
}

.logo span {
  color: white;
}

.navigation-bar {
  float: left;
}

.navigation-bar ul {
  margin-top: 30px;
  margin-left: 25px;
  list-style: none;
}

.navigation-bar ul li {
  display: inline-block;
  padding: 0 3px;
  padding-top: 10px;
  font-size: 12pt;
  line-height: 100%;
}

.navigation-bar ul li>a {
  padding-top: 40px;
  padding-bottom: 20px;
  height: 100%;
  color: black;
  text-decoration: none;
}

.navigation-bar ul li a:hover {
  background-color: rgb(255, 151, 0);
}

.main {
  background-image: url(background001.png);
}

.main-body {
  margin: 0 auto;
  width: 60%;
}

.main-body>img {
  display: block;
  width: 100%;
  border: 3px white solid;
}

.intro {
  height: 200px;
  background-color: rgb(54, 54, 54);
}

.restaurant-name {
  margin-left: 20%;
  padding-top: 15px;
  padding-bottom: 15px;
  color: white;
  font-size: 24px;
}

.restaurant-name span {
  color: rgb(255, 151, 0);
}

.restaurant-introduction {
  margin: 0 20%;
  width: 60%;
  color: rgb(147, 147, 147);
}

.restaurant-introduction p {
  text-indent: 2.4em;
  letter-spacing: 2px;
  line-height: 1.5em;
}

.photo-show {
  float: left;
  /*    margin: -40px 60px; */
  margin-top: -40px;
  width: 25%;
}

.photo-show:hover {
  color: rgb(255, 129, 1);
}

.photo-show img {
  display: block;
  margin: 0 auto;
  padding-top: 20px;
  width: 40%;
}

.photo-show h4 {
  margin: 10px auto;
  text-align: center;
}

.photo-show p {
  padding: 0 10px;
  text-align: center;
  font-size: 12px;
}

.photos {
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
  width: 24%;
  /*     float: left; */
}

.photos img {
  display: block;
  margin-left: 10%;
  width: 80%;
  border: 3px white solid;
}

.recommend {
  display: inline-block;
  margin-top: 15px;
  width: 32%;
}

.recommend img {
  display: block;
  padding-left: 5%;
  width: 90%;
}

.recommend h4 {
  text-align: center;
  line-height: 3em;
}

.recommend h4 span {
  color: rgb(255, 129, 1);
}

.recommend p {
  padding-left: 5%;
  width: 90%;
  font-size: 9px;
}

.recommend button {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background-color: rgb(65, 65, 65);
  color: grey;
  text-align: center;
}

.recommend button:hover {
  color: rgb(255, 129, 1);
}

.bottom {
  margin-top: 30px;
  height: 160px;
  background-color: rgb(169, 169, 169);
}

.nav-bottom {
  float: left;
  margin-right: 3%;
}

.nav-bottom h4 {
  margin-top: 10px;
  margin-bottom: 7px;
}

.nav-bottom a {
  color: rgb(78, 78, 78);
}

.nav-bottom a:hover {
  color: rgb(255, 151, 1);
}

.nav-bottom ul {
  list-style: none;
}

.nav-bottom ul li {
  font-size: 12px;
  line-height: 1.5em;
}

.footer-nav {
  height: 50px;
  background-color: black;
  color: grey;
}

.icon {
  float: right;
}

.small-left {
  display: block;
  float: left;
  line-height: 2em;
}

.small-right {
  display: block;
  float: right;
  line-height: 2em;
}

.circle {
  margin: 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: grey;
}

.circle:hover {
  background-color: rgb(255, 151, 1);
}
